<template>
    <div>
        <form-create 
        v-model="supplier.fApi" 
        :rule="supplier.rule" 
        :option="supplier.option" 
        @btn-search-click="loadList(true)" 
        @btn-reset-click="resetForm"
        @btn-submit-click="checkSubmit"/>
        <el-alert v-if="tis" :title="tis" type="success" show-icon :closable="false"/>
        <el-table :data="this.tableData" :row-key="getRowKeys"
        @selection-change="handleSelectionChange"  ref="table" stripe>
            <tr v-for="(item, index) in this.tableLabel" :key="index">
                <el-table-column v-if="item.type==='checkbox'" :fixed="item.type==='checkbox'?'left':'none'" type="selection" width="55" :reserve-selection="true"></el-table-column>
                <el-table-column v-else-if="item.type==='normal'" :prop="item.prop" :label="item.label" :min-width="item.width"></el-table-column>
            </tr>
        </el-table>
        <el-row>
        <el-pagination
            class="page-footer"
            background
            layout="total,prev,pager,next,sizes,jumper"
            :total="this.models.total"
            :page-sizes="[10,20,30,40,50]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"/>
        </el-row>    
           
    </div>
</template>

<script>

  import { PARAMS_SUPPLIER,OPTION_INLINE} from "@/config/common"
    export default {
        props: {
            tableData: {
              type: Array,
              default: () => {
                  return [];
              }
            },
            tableLabel:{
              type: Array,
              default: () => {
                  return [];
              }
            },
            models: {
              type: Object,
              default: () => {
                  return null;
              }
            },
        },
        data() {
            return {
                supplier:{
                    fApi:{},
                    rule:PARAMS_SUPPLIER,
                    option:OPTION_INLINE
                },
                tis:"",
                ids:[],
                params: {
                    type:"page",
                    pageNum: 1,
                    pageSize: 10
                },
            };
        },
        mounted(){
             this.supplier.fApi.setValue({'name':''})
        },
        methods: {
            getRowKeys(row) {
              return row.id
            },
            handleSelectionChange(val) {
              let ids = [];
              val.forEach(item =>{ 
                  ids.push(item)
              });
              this.ids = ids;
              this.tis="已选择 "+val.length+" 项";
              if(val.length==0){
                this.tis="";
                this.ids = [];
              }
            },
            resetForm(){
                //this.supplier.fApi.resetFields();
                this.supplier.fApi.setValue({'name':''})
                this.loadList(true);
            },
            checkSubmit(row){
                if(this.ids.length ==0){
                    return this.$message.error('最少勾选一个物资！');
                }
                this.$emit("on-check-click", this.ids);
                this.$refs.table.clearSelection();
                this.ids = [];
                this.tis = "";
            },
            handlePageChange(page) {
               this.params.pageNum = page;
                this.loadList(false);
            },
            handleSizeChange(page) {
                this.params.pageSize = page;
                this.loadList(false);
            },
            loadList(flag) {
                const obj = this.supplier.fApi.bind();
                this.params.name = obj.name;
                this.params.flag = flag;
                this.$emit("on-search-click", this.params);
            },
        
            onClose() {
                this.$emit("on-cancel");
            }
        }
    };
    </script>
    
    